<template>
    <div>
        <div class="header">
            <div class="logo" @click="handleJump('/')">
                <img :src="logo" alt="">
            </div>
            <ul class="nav">
                <li class="infosite" @click="handleJump('/')">系统首页</li>
                <li @click="handleJump('/notice', 1)" :class="{ active: isactive == 1 ? 'active' : '' }">视频专区</li>
                <li @click="handleJump('/search-guide', 2)" :class="{ active: isactive == 2 ? 'active' : '' }">搜索指南</li>
                <li  @click="handleJump('/join', 3)" :class="{ active: isactive == 3 ? 'active' : '' }">特惠专栏
                </li>
                <li class="li-end" @click="handleJump('/order', 4)" :class="{ active: isactive == 4 ? 'active' : '' }">订单
                </li>
            </ul>
            <div class="text">
                <div class="icon"></div>
                <!-- <p>{{notice}}</p> -->
                <!-- <u-notice-bar :data="notice" class="notice-box"></u-notice-bar> -->
                <marquee-text :duration="8" class="notice-box">
                    {{ notice }}
                </marquee-text>
            </div>
            <div class="cart" @click="handleTo">
                <div class="icon1"></div>
                <!-- <div class="num">{{ user.cart }}</div> -->
                <div class="num">{{ totalnum }}</div>
            </div>
            <div class="cart" @click="handleCart">
                <div class="icon"></div>
                <!-- <div class="num">{{ user.cart }}</div> -->
                <div class="num">{{ total }}</div>
            </div>

            
            <div class="login" v-if="!user.userinfo" @click="handleLogin">登录</div>
            <div class="login1" v-else @click="handleMine"> <el-avatar :src="user.userinfo.avatar" />
                <MyDrop />
            </div>
            <div class="vip"></div>
        </div>
    </div>
</template>
  
<script setup>
import { ref,onMounted, onBeforeUpdate} from 'vue';
import { useUser } from '../store/user';
import MyDrop from './components/my-drop.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
import { Site } from '../api/join'
import { CartCalc ,CartTogo,indexconfig} from '../api/user'
const isactive = ref(0)
// 获取用户信息

const user = useUser()

const router = useRouter()
// 登录
const handleLogin = () => {
    router.push('/login')
}
const handleMine = () => {
    router.push('/mine')
}

const handleJump = (path, num) => {
    router.push(path)
    isactive.value = num
}
const handleCart = () => {
    if (user.userinfo) {
        router.push('/cart')
    } else {
        ElMessage.info('请登录账号')
    }
}

let total = ref(0)
let nums = ref(0)
let totalnum = ref(0)
const logo = ref('')
const siteinfo = ref('')
const notice = ref('')
indexconfig().then(res => {
    logo.value = res.data.data.image
    // siteinfo.value = res.data.data.name
    document.title =  res.data.data.name
    
    notice.value = res.data.data.name
    // console.log(res);
})

onBeforeUpdate(() => {
    getCartCalc()
})

const getCartCalc = () => {
    if(user.userinfo){
    let { token } = user.userinfo
    
    CartCalc(token).then(res => {
        let { total_sum ,total_num} = res.data.data
        total.value = total_sum
        totalnum.value = total_num
        // user.cart = count
    })
    CartTogo(token).then(res=>{
        // console.log(res);
        nums.value = res.data.data

    })
    }
    // let { token } = user.userinfo
    // CartCalc(token).then(res => {
    //     let { total_sum } = res.data.data
    //     total.value = total_sum
    //     // user.cart = count
    // })
    // CartTogo(token).then(res=>{
    //     // console.log(res);
    //     nums.value = res.data.data

    // })
}
const handleTo = () => {
    // let { id, name } = info
    router.push({
        path: '/goods-detail',
        query: {
            id:nums.value,
            typeRef:1
        }
    })
}


</script>
  
<style lang="scss" scoped>

.icon1 {
            width: .1042rem;
            height: .1042rem;
            margin-right: .1458rem;
            background: url('../assets//images/shuju.png') no-repeat center center/100%;
        }
.header {
    height: .5938rem;
    padding: 0 .1563rem 0 .2604rem;
    background: #fff;
    display: flex;
    justify-content: start;
    align-items: center;
    box-shadow: 2px 2px 20px 2px black;

    >.logo {
        width: .7083rem;
        height: .5708rem;
        margin-right: .2167rem;
        cursor: pointer;

        >img {
            width: 100%;
            height: 100%;
        }
    }

    >.nav {
        display: flex;
        width: 50%;

        >li {
            margin-right: .1458rem;
            flex: 1;
            height: .2083rem;
            font-size: .0833rem;
            font-weight: 300;
            text-align: center;
            line-height: .2083rem;
            color: #333333;
            cursor: pointer;
        }

        >li.active {
            background: #3F7233;
            border-radius: .1042rem;
            color: #FFFFFF;
        }

        .infosite {
            font-weight: bold;
            font-size: .0938rem;
        }

        >.li-end {
            margin-right: .4031rem;
        }
    }

    >.text {
        width: 1.9271rem;
        height: .3125rem;
        background: #FFFFFF;
        border: .0052rem solid #333333;
        border-radius: .1563rem;
        display: flex;
        padding-left: .1458rem;
        align-items: center;
        margin-right: .1042rem;

        >.icon {
            width: .1042rem;
            height: .1042rem;
            margin-right: .1458rem;
            background: url('../assets//images/icon_gg.png') no-repeat center center/100%;
        }

        >.notice-box {
            flex: 1;
            font-size: .0729rem;
            font-weight: 400;
            color: #666666;
            line-height: .1354rem;
        }
    }

    .cart {
        width: .5208rem;
        height: .3125rem;
        background: #FFFFFF;
        border: .0052rem solid #333333;
        border-radius: .1563rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 .0521rem;
        margin-right: .1042rem;
        cursor: pointer;

        >.icon {
            width: .1042rem;
            height: .1042rem;
            background: url('../assets/images/icon_ddlb.png') no-repeat center center/100%;
        }

        >.num {
            min-width: .0833rem;
            min-height: .0833rem;
            background: #3F7233;
            border-radius: 50%;
            font-size: .0625rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: .0833rem;
        }

    }

    >.login {
        width: .5208rem;
        height: .3125rem;
        border: .0052rem solid #3F7233;
        border-radius: .1563rem;
        text-align: center;
        line-height: .3125rem;
        font-size: .0729rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #3F7233;
        margin-right: .1042rem;
        cursor: pointer;

    }

    >.login1 {
        width: .6771rem;
        height: .3125rem;
        background: #FFFFFF;
        border: .0052rem solid #3F7233;
        border-radius: .1563rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .0729rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #3F7233;
        margin-right: .1042rem;
        cursor: pointer;

        >.el-avatar {
            width: .125rem;
            height: .125rem;
            margin-right: .0521rem;
        }
    }

    >.vip {
        width: .3125rem;
        height: .3125rem;
        background: #FFFFFF;
        border: .0052rem solid #333333;
        border-radius: .1563rem;
        background: url('../assets//images/icon_hy.png') no-repeat center center/.125rem .125rem;
    }
}
</style>